<template>
  <div>
    <!-- 头部 -->
    <header class="header">智慧城市大气环境检测系统</header>
    <!-- /头部 -->
    <!-- 体部 -->
    <div class="content">
      <div class="top">
        <div class="left">
          <div  class="charts">
            <Left1></Left1>
          </div>
          <div  class="charts">
            <Left2/>
          </div>
        </div>
        <div class="center">
          <Map></Map>
        </div>
        <div class="right">
          <div  class="charts"><Right1></Right1></div>
          <div  class="charts">
            <Right2></Right2>
          </div>
        </div>
      </div>
      <div class="bottom">
        <div  class="charts"> <Bottom1></Bottom1></div>
        <div  class="charts"> <Bottom2></Bottom2></div>
        <div  class="charts"> <Bottom3></Bottom3></div>
        <div  class="charts"> <Bottom4></Bottom4></div>
      </div>
    </div> 
    <!-- /体部 -->
  </div>
</template>
<script>
import Left1 from '../../pages/government/components/Left1.vue'
import Left2 from '../../pages/government/components/Left2.vue'
import Right1 from '../../pages/government/components/Right1.vue'
import Right2 from '../../pages/government/components/Right2.vue'
import Map from '../../pages/government/components/Map.vue'
import Bottom1 from '../../pages/government/components/Bottom1.vue'
import Bottom2 from '../../pages/government/components/Bottom2.vue'
import Bottom3 from '../../pages/government/components/Bottom3.vue'
import Bottom4 from '../../pages/government/components/Bottom4.vue'
export default {
  components:{
    Left1,
    Left2,
    Right1,
    Right2,
    Map,
    Bottom1,
    Bottom2,
    Bottom3,
    Bottom4,
  },
  data(){
    return{

    }
  }
}
</script>

<style lang="scss">
  // 头部样式
  .header{
    height: 60px;
    background-image: url(../../assets/layout/header.png);
    background-size: 100% 200px;
    color: #fff;
    font-size: 25px;
    text-align: center;
  }
  // 体部样式
  .content{
    height: calc(100vh - 60px);
    display: flex;
    flex-direction: column;
    .charts{
      background-image: url('../../assets/layout/chart_box_bg.png');
      background-size: 100% 100%;
      margin: 0 .5em .5em .5em;
    }
    .top{
      flex: 2;
      display: flex;
      .left,.right{
        flex: 1;
        display: flex;
        flex-direction: column;
        div{
          flex: 1;
        }
      }
      .center{
        flex: 2;
        background-image: url("../../assets/layout/chart_center_box_bg.png");
        background-size: 100% 100%;
        margin-bottom: .5em;
      }
    }
    .bottom{
      flex: 1;
      display: flex;
      div{
        flex: 1;
      }
    }
  }
</style>